/*
    Copyright 2011 - Tommi Laukkanen (www.substanceofcode.com)

    This file is part of MeeToDo.

    MeeToDo is free software: you can redistribute it and/or modify
    it under the terms of the GNU Lesser General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    MeeToDo is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Lesser General Public License for more details.

    You should have received a copy of the GNU Lesser General Public License
    along with MeeToDo. If not, see <http://www.gnu.org/licenses/>.
*/

import QtQuick 1.1
import com.nokia.symbian 1.1
import "components"
import "js/script.js" as Script
import "js/storage.js" as Storage

PageStackWindow {
    showToolBar: false
   initialPage: window

Rectangle {
    id: window
    anchors.fill: parent
//    width: 480
//    height: 480

    ListModel {
        id: listsModel
    }

    ListModel {
        id: tasksModel
    }

    function getLists(key, value) {
        Script.lists = eval("(" + value + ")");
        Script.refreshListsModel();
    }

    function debugPrint(obj) {
        var objJSON = JSON.stringify(obj, Script.replacer);
        //console.log("Debug JSON " + objJSON);
    }

    function showTasks(listName) {
        Script.selectedListName = listName;
        listNameText.text = listName;
        Script.fillTasksList(listName);
        listOfLists.state = "hidden";
    }

    function showTask(taskName) {
        taskpaper.originalTaskName = taskName;
        taskNameInput.text = taskName;
        paper.flipped = true;
    }

    Timer {
        id: saveTimer
        interval: 1000
        repeat: false
        onTriggered: {
            var listsJSON = JSON.stringify(Script.lists, Script.replacer);
            Storage.setKeyValue("lists", listsJSON);
        }
    }

    function saveLists() {
        saveTimer.start();
    }

    Component.onCompleted: {
        //saveLists();
        Storage.getKeyValue("lists", getLists);
    }

    Image {
        x: 0
        y: 0
        width: window.width
        height: window.height - 60
        fillMode: Image.Tile
        source: "pics/leather.png"
    }

    Item {
        id: listOfLists
        width: window.width
        height: window.height
        state: "shown"

        Image {
            visible: listOfLists.state == "shown"
            source: "pics/black-corner.png"
        }
        Image {
            visible: listOfLists.state == "shown"
            source: "pics/black-corner.png"
            y:parent.height - 60 - height
            rotation: -90
        }

        BorderImage {
            id: listBackground
            source: "pics/paperborderleft.png"
            x: 10
            y: 10
            width: parent.width-10; height: parent.height-y - 70
            border.left: 16; border.top: 16
            border.right: 16; border.bottom: 16
            horizontalTileMode: BorderImage.Repeat
            verticalTileMode: BorderImage.Repeat

            Item {
                width: parent.width
                height: 80
                Text {
                    x: 10
                    anchors.verticalCenter: parent.verticalCenter
                    text: listsModel.count==0 ? "Add list" : "Select list"
                    font.pixelSize: 30
                    color: "#c22525"
                }
                /*PlusButton {
                    x: parent.width - width - 20
                    anchors.verticalCenter: parent.verticalCenter
                    y: 10
                    onClicked: {
                        listDialog.clear();
                        listDialog.state = "shown";
                    }
                }*/
            }

            Rectangle {
                id: listsRectangle
                x: 10
                y: 80
                width: parent.width - 30
                height: parent.height - y - 10
                border.width: 1
                border.color: "#ccc"
                opacity: 0.8
                color: "#00000000"
                clip: true

                ListView {
                    model: listsModel
                    x: 0
                    y: 0
                    width: parent.width
                    height: parent.height
                    delegate: listsDelegate
                }
            }
        }

        states: [
            State {
                name: "hidden"
                changes: [
                    PropertyChanges { target: listOfLists; x: -window.width; },
                    PropertyChanges { target: paper; x: 0; }
                ]
            },
            State {
                name: "shown"
                changes: [
                    PropertyChanges { target: listOfLists; x: 0; },
                    PropertyChanges { target: paper; x: window.width + 10; }
                ]
            }
        ]

        transitions: [
            Transition {
                ParallelAnimation {
                    NumberAnimation { target: listOfLists; property: "x"; duration: 500; easing.type: "InOutQuad" }
                    NumberAnimation { target: paper; property: "x"; duration: 500; easing.type: "InOutQuad" }
                }
            }
        ]

    }

    Image {
        visible: listOfLists.state != "shown"
        source: "pics/black-corner.png"
        x: parent.width - width
        rotation: 90
    }

    Image {
        visible: listOfLists.state != "shown"
        source: "pics/black-corner.png"
        x: parent.width - width
        y:parent.height - 60 - height
        rotation: 180
    }

    BorderImage {
        id: taskpaper
        y: 10
        width: parent.width-10;
        height: parent.height-y - 70;
        border { left: 16; top: 16; right: 16; bottom: 16 }
        horizontalTileMode: BorderImage.Repeat
        verticalTileMode: BorderImage.Repeat
        source: "pics/paperborder.png"
        opacity: 0
        property string originalTaskName: ""

        Text {
            y: 10
            x: 30
            text: "Description"
            font.pixelSize: 24
            color: "#c22525"
        }

        TextArea {
            id: taskNameInput
            x: 30
            y: 44
            width: parent.width - 60
            //anchors.verticalCenter: parent.verticalCenter
            height: 32*6 + 16
            placeholderText: "Task description"
            wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
        }

    }

    Toolbar {
        onBack: {
            if(paper.flipped) {
                if(taskpaper.originalTaskName=="" || taskpaper.originalTaskName==null) {
                    Script.createTask(taskNameInput.text);
                } else {
                    Script.renameTask(taskpaper.originalTaskName, taskNameInput.text);
                }
                window.saveLists();
                paper.flipped = false;
            } else {
                listOfLists.state = "shown";
            }
        }
        onRemoveList: {
            confirmDeleteDialog.state = "shown";
        }
        onRemoveTask: {
            Script.deleteTask( taskpaper.originalTaskName );
            paper.flipped = false;
            window.saveLists();
        }
        onAdd: {
            if(listOfLists.state=="shown") {
                listDialog.clear();
                listDialog.state = "shown";
            } else {
                // Show add
                taskpaper.originalTaskName = "";
                taskNameInput.text = "";
                paper.flipped = true;                
            }
        }
        onPurge: {
            Script.purge();
            window.saveLists();
        }
    }

    Item {
        id: paper
        x: 0
        y: 10
        width: parent.width-10; height: parent.height-y - 70
        state: "front"
        property bool flipped: false

        //front:
            BorderImage {
                width: parent.width
                height: parent.height
                border { left: 16; top: 16; right: 16; bottom: 16 }
                horizontalTileMode: BorderImage.Repeat
                verticalTileMode: BorderImage.Repeat
                source: "pics/paperborder.png"

                Item {
                    id: listTitle
                    width: parent.width
                    height: tasksRectangle.y
                    x: 10
                    Text {
                        id: listNameText
                        x: 10
                        anchors.verticalCenter: parent.verticalCenter
                        text: "Next"
                        font.pixelSize: 30
                        color: "#c22525"
                    }

                    /*Rectangle {
                        x: parent.width - width - 20
                        anchors.verticalCenter: parent.verticalCenter
                        //y: paper.y + 10
                        width: 55
                        height: 55
                        border.width: 1
                        border.color: "#ccc"
                        radius: 4
                        smooth: false
                        //opacity: 0.8
                        color: addMouseArea.pressed ? "#ccc" : "#00000000"

                        Image {
                            source: "pics/plussimple.png"
                            anchors.centerIn: parent
                            opacity: 0.5
                        }

                        MouseArea {
                            id: addMouseArea
                            anchors.fill: parent
                            onClicked: {
                                // Show add
                                taskpaper.originalTaskName = "";
                                taskNameInput.text = "";
                                paper.flipped = true;
                            }
                        }
                    }*/
                }

                Rectangle {
                    id: tasksRectangle
                    x: 20
                    y: 80
                    width: parent.width - 30
                    height: parent.height - y - 10
                    border.width: 1
                    border.color: "#ccc"
                    opacity: 0.8
                    color: "#00000000"
                    clip: true

                    ListView {
                        model: tasksModel
                        x: 0
                        y: 0
                        width: parent.width
                        height: parent.height
                        delegate: taskDelegate
                    }

                    // Red stribes
                    Rectangle {
                        x: 60
                        width: 1
                        opacity: 0.8
                        height: tasksRectangle.height
                        color: "#d88"
                    }
                    Rectangle {
                        x: 62
                        width: 1
                        opacity: 0.8
                        height: tasksRectangle.height
                        color: "#d88"
                    }
                }
            }

        transform: [
            Rotation {
                id: paperRotation
                origin.x: 0 //paper.width/2
                origin.y: paper.height/2
                axis.x: 0; axis.y: 1; axis.z: 0     // set axis.y to 1 to rotate around y-axis
                angle: 0 // the default angle
            }
        ]

        states: State {
            name: "back"
            changes: [
                PropertyChanges { target: paperRotation; angle: -90 },
                PropertyChanges { target: taskpaper; opacity: 1 }
            ]
            when: paper.flipped
        }

        transitions: [
            Transition {
                to: "back"
                ParallelAnimation {
                    NumberAnimation { target: paper; property: "x"; duration: 400; easing.type: "InOutCubic" }
                    NumberAnimation { target: paperRotation; property: "angle"; duration: 800; easing.type: "InOutCubic" }

                }
            },
            Transition {
                from: "back"
                SequentialAnimation {
                    ParallelAnimation {
                        NumberAnimation { target: paper; property: "x"; duration: 400; easing.type: "InOutCubic" }
                        NumberAnimation { target: paperRotation; property: "angle"; duration: 800; easing.type: "InOutCubic" }
                    }
                    NumberAnimation { target: taskpaper; property: "opacity"; duration: 10; }
                }
            }
        ]
    }

    ListDialog {
        id: listDialog
        state: "hidden"
        onOk: {
            Script.createList(name);
            window.saveLists();
            window.showTasks(name);
            listDialog.state = "hidden";
        }
        onCancel: listDialog.state = "hidden";
    }

    ConfirmDialog {
        id: confirmDeleteDialog
        onOk: {
            Script.removeCurrentList();
            window.saveLists();
            listOfLists.state = "shown";
        }
        onCancel: {
            confirmDeleteDialog.state = "hidden";
        }
    }

    Component {
        id: taskDelegate
        Item {
            id: taskRow
            x: 0
            width: parent.width
            height: nameText.height + 24

            Text {
                id: nameText
                y: 12
                x: 70
                width: parent.width - x - 40
                text: done ? "<strike>" + name + "</strike>" : name
                //font.strikeout: done
                font.pixelSize: 32
                color: done ? "#aaa" : "#555"
                wrapMode: Text.Wrap
            }

            Image {
                source: "pics/br_next.png"
                x: parent.width - 30
                anchors.verticalCenter: parent.verticalCenter
                opacity: 0.5
            }

            Rectangle {
                x: 20
                y: 24
                width: 20
                height: 20
                smooth: false
                border.color: "#aaa"
                border.width: 1
                //radius: 1
                gradient:
                    Gradient {
                        GradientStop { position: 0.0; color: "#999" }
                        GradientStop { position: 0.4; color: "#ddd" }
                        GradientStop { position: 0.9; color: "#ddd" }
                        GradientStop { position: 1.0; color: "#aaa" }
                    }

                Image {
                    source: "pics/checkmark.png"
                    anchors.centerIn: parent
                    visible: done
                }
/*
                Rectangle {
                    anchors.centerIn: parent
                    width: 19
                    height: 19
                    color: "#222"
                    radius: 1
                    visible: done
                }
*/

            }

            MouseArea {
                width: 68
                height: taskRow.height
                onClicked: {
                    //console.log("Checkbox clicked");
                    var task = tasksModel.get(index);
                    task.done = !task.done;
                    //console.log("Task " + task.name + " is now " + task.done);
                    tasksModel.set(index, task);
                    Script.markTaskDone(index, task.done);
                    window.saveLists();
                }
            }

            MouseArea {
                id: openTaskMouse
                x: 68
                height: taskRow.height
                width: parent.width - 68
                onClicked: {
                    console.log("Opening task " + name);
                    window.showTask( name );
                }
            }

            Rectangle {
                id: line
                y: parent.height
                width: parent.width
                height: 1
                color: "#bbb"
                opacity: 0.8
            }
        }
    }

    Component {
        id: listsDelegate
        Item {
            id: listRow
            x: 0
            width: parent.width
            height: nameText.height + 24

            Rectangle {
                anchors.fill: parent
                color: "#ccc"
                visible: listMouse.pressed
            }

            Text {
                id: nameText
                y: 12
                x: 10
                width: parent.width
                text: name
                font.pixelSize: 32
                color: "#555"
                wrapMode: Text.Wrap
            }

            Image {
                source: "pics/br_next.png"
                x: parent.width - 30
                anchors.verticalCenter: parent.verticalCenter
                opacity: 0.5
            }

            Rectangle {
                id: line
                y: parent.height
                width: parent.width
                height: 1
                color: "#bbb"
                opacity: 0.8
            }

            MouseArea {
                id: listMouse
                anchors.fill: parent
                onClicked: {
                    window.showTasks( name );
                }
            }
        }
    }

}

}
